<template>
	<view>
		<view class="vip-img">
			<image :src="imglink + 'member/Institutions_image_title-buy.png'" mode=""></image>
		</view>
		<view class="vip-buy-content">
			<view class="vip-level-buy">
				<view class="vip-level-title">
					会员等级- <text>铂金会员</text>
				</view>
				<view class="recommend-coupon-content">
					<view class="recommend-coupon-details">
						<view class="">{{vipInfo.validity_period}}</view>
						<view class="">有效时间(天)</view>
					</view>
					<view class="recommend-coupon-line"></view>
					<view class="recommend-coupon-details">
						<view class="" style="color: #666666;text-decoration: line-through;">¥{{vipInfo.price}}</view>
						<view class="">原价(元)</view>
					</view>
					<view class="recommend-coupon-line"></view>
					<view class="recommend-coupon-details">
						<view class="">¥{{vipInfo.discount_price}}</view>
						<view class="">特惠(元)</view>
					</view>
					<view class="recommend-coupon-line"></view>
					<!-- <view class="recommend-coupon-details" style="position: relative;">
						<view class="">¥0.82</view>
						<view class=""  style="color: #999999;font-size: 24upx;">核算每天(元)</view>
						<text class="coupon-details-top">超值优惠</text>
					</view> -->
				</view>
				<!-- <view v-if="specialOffer">
					<view class="special-offer" style="margin-top: 40upx;">
						<view class="">专属特价(元)</view>
						<view>-¥99</view>
					</view>
					<view class="special-offer" style="border-top: none;">
						<view class="">核算每天(元)</view>
						<view>¥0.27</view>
					</view>
				</view> -->
				<view class="vip-buy-now" @click="weChatPay">
					立刻支付¥{{vipInfo.discount_price}}
				</view>
				<view class="give-other-coupon-tip">
					确认支付即代表同意<text @click="agreementClick">《团好课-会员协议》</text>
				</view>
			</view>
			<view class="vip-level-buy" style="padding: 30upx 20upx;">
				<view class="vip-introduce" style="margin-bottom: 30upx;">
					<!-- <view class="vip-introduce-title">VIP会员介绍</view> -->
					<!-- <image :src="imglink + 'home/thk.jpg'" mode="widthFix"></image> -->
					<view class="" v-html="detail"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				specialOffer:true,
				imglink: this.$store.state.imgLink,
				store_id:'',
				vipInfo:{
					id:'',
					validity_period:'',
					price:'',
					discount_price:''
				},
				detail:null,
				page:'',
			}
		},
		onLoad(options) {
			let store_id = parseInt(uni.getStorageInfoSync("share_store_id"),10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.page = options.page
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			
			this.getVipPriceInfo()
			this.getAdvertisementImg()
			
		},
		methods:{
			agreementClick(){
				uni.navigateTo({
					url:'vipAgreement/vipAgreement?store_id=' + this.store_id
				})
			},
			getAdvertisementImg(){
				let data = {
					token:this.$store.getters.getToken,
				}
				this.$api.get_advertisementImg(data).then(res => {
					console.log(res)
					if(res.status){
						this.detail = res.data.detail.replace(/\<img/gi, '<img style="max-width:95%;height:auto" ');
						console.log(this.detail,"？？？？？？？？？？？？？？？？？？？？");
					}
				}).catch(err => {
					console.log(err)
				})
			},
			weChatPay(){
				let data = {
					token:this.$store.getters.getToken,
					// #ifdef H5
					in_type:'h5'
					// #endif
					// #ifdef MP-WEIXIN
					in_type:'min',
					// #endif
					// store_member_id:this.vipInfo.id
				}
				this.$api.pay_money(data).then(res => {
					console.log(res,'pay_money')
					if(res.status){
						// #ifdef H5
							this.onBridgeReady(res.message)
						// #endif
						// #ifdef MP-WEIXIN
							this.onBridgeReady(res.message)
						// #endif
						// if (typeof WeixinJSBridge == "undefined"){
						//    if( document.addEventListener ){
						//        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						//    }else if (document.attachEvent){
						//        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
						//        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						//    }
						// }else{
						//    onBridgeReady();
						// }
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onBridgeReady(data){
				let that = this
				console.log(data,'22222222')
				// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp:data.timeStamp,//时间戳，自1970年以来的秒数     
						nonceStr:data.nonceStr, //随机串     
						package:data.package,
						signType:"MD5",         //微信签名方式：     
						paySign:data.paySign, //微信签名 
						success: function(res) {
							uni.showToast({
								title: "支付成功",
								duration: 1000,
								icon: "none",
								mask: true
							})
							setTimeout(function() {
								uni.navigateTo({
									url: "pages/memberCenter/memberCenter?store_id=" + this.store_id
								})
							}, 1000)
						},
						fail: function(err) {
							console.log(JSON.stringify(err));
							uni.showToast({
								title: "支付失败",
								duration: 1000,
								icon: "none",
								mask: true
							})
							setTimeout(function() {
								uni.navigateBack({})
							}, 1000)
						}
					});
				// #endif
				// #ifdef H5
					const payData = {
						"appId":data.appId,//公众号名称，由商户传入
						"timeStamp":data.timeStamp,//时间戳，自1970年以来的秒数     
						"nonceStr":data.nonceStr, //随机串     
						"package":data.package,
						"signType":"MD5",         //微信签名方式：     
						"paySign":data.paySign //微信签名 
					}
				
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', payData,
						function(res){
							console.log(res,'resresres')
							
							if(res.err_msg == "get_brand_wcpay_request:ok" ){
								let redirectUrl =  '/pages/memberCenter/memberCenter?store_id='+this.store_id
								uni.setStorageSync('redirectUrl', redirectUrl)
								uni.redirectTo({
									url:'../memberCenter/memberCenter?store_id='+this.store_id
								})
								// this.$api.pay_after({token:this.$store.getters.getToken}).then(res => {
								//   console.log(res)
								// }).catch(err => {
								//   console.log(err)
								// })
								// that.$api.pay_after({token:that.$store.state.token,res:JSON.stringify(res)}).then(res => {
								// 	console.log(res)
								// }).catch(err => {
								// 	console.log(err)
								// })
								// location.href='http://thkapi.zanboon.com:8070/pay/front_pay/payment_complete?token=' + this.$store.getters.getToken + '&res=' + res
								// 使用以上方式判断前端返回,微信团队郑重提示：
								// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							} 
					}); 
				// #endif
				
			},
			// 获取会员信息
			getVipPriceInfo(){
				let params = {
					token:this.$store.getters.getToken
				}
				this.$api.getVipPriceInfo(params).then(res => {
					if(res.status){
						let data = res.list[0]
						this.vipInfo.validity_period = data.validity_period
						this.vipInfo.price = data.price
						this.vipInfo.discount_price = data.discount_price
						this.vipInfo.id = data.id
					}
				})
			}
		},
		// onUnload() {
		// 	if( this.page == 'share' ){
		// 		wx.reLaunch({
		// 			url: '/pages/memberCenter/memberCenter?store_id=' + this.store_id
		// 		})
		// 	}
		// }
	}
</script>

<style>
	page{
		background: linear-gradient(#F86C49,#F99466);
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.vip-img,.vip-img>image{
		width: 100%;
		height: 218upx;
	}
	.vip-buy-content{
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.vip-level-buy{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		background: #FFFFFF;
		border: 4upx solid #FFDC34;
		border-radius: 20upx;
		box-shadow: 0 4upx 22upx 0 rgba(248, 41, 45, 0.39);
		margin-top: 40upx;
	}
	.vip-level-title{
		color: #666666;
		font-size: 30upx;
		margin-left: 30upx;
	}
	.vip-level-title>text{
		color: #FF8B46;
	}
	.recommend-coupon-content{
		margin-top: 40upx;
		display: flex;
		justify-content: space-between;
	}
	.recommend-coupon-details{
		flex-grow: 1;
		text-align: center;
	}
	.recommend-coupon-details>view:first-child{
		color: #FF391F;
		font-size: 36upx;
	}
	.recommend-coupon-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.recommend-coupon-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 22upx;
	}
	.coupon-details-top{
		display: inline-block;
		width: 108upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 22upx;
		background: #FF391F;
		border-radius: 14upx 14upx 14upx 0;
		position: absolute;
		top: -30upx;right: 12upx;
	}
	.vip-buy-now{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		margin: 0 auto;
		margin-top: 30upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.give-other-coupon-tip{
		text-align: center;
		color: #999999;
		font-size: 24upx;
		margin-top: 20upx;
	}
	.give-other-coupon-tip>text{
		color: #FF8B46;
	}
	.vip-introduce-title{
		color: #333333;
		font-size: 30upx;
	}
	.vip-introduce>image{
		width: 100%;
		height: 366upx;
		margin: 20upx 0;
	}
	.vip-introduce-content{
		color: #333333;
		font-size: 28upx;
	}
	.special-offer{
		width: 100%;
		border-top: 1upx solid #DEDEDE;
		border-bottom: 1upx solid #DEDEDE;
		padding: 30upx 20upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.special-offer>view:first-child{
		color: #333333;
		font-size: 30upx;
	}
	.special-offer>view:last-child{
		color: #FF391F;
		font-size: 34upx;
	}
</style>
